<template>
  <div>
    <Form
      ref="formDynamic"
      :model="SignForm"
      :label-width="40"
      :rules="resetRules"
      style="width: 400px"
    >
      <FormItem prop="username">
        <Input
          type="text"
          v-model="SignForm.username"
          placeholder="please enter your user E-maiil"
        >
          <span slot="append">@QQ.com</span>
        </Input>
      </FormItem>
      <FormItem class="resetpass" prop="code">
        <Input
          type="text"
          v-model="SignForm.code"
          prefix="md-mail-open"
          placeholder="please enter you E-maiil-code"
          class="code_email"
        >
        </Input>
        <Button
          class="reset_btn"
          type="primary"
          :disabled="!sendCodeStatus"
          @click="handleEmailcode()"
          >{{ sendCodeText }}</Button
        >
      </FormItem>
      <FormItem prop="password">
        <Input
          type="text"
          v-model="SignForm.password"
          prefix="md-lock"
          placeholder="password"
        >
        </Input>
      </FormItem>
      <FormItem prop="confirmpassword">
        <Input
          type="text"
          v-model="SignForm.confirmpassword"
          prefix="md-lock"
          placeholder="Confirm password"
        >
        </Input>
      </FormItem>
      <Button class="sub_btn" type="primary" @click="handleSignup('formDynamic')"
        >Rigister</Button
      >
    </Form>
  </div>
</template>
<script>
import { SignupAPI, Sendemails,CheckUsers } from "@/request/api";
export default {
  data() {
    const validateEamil = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter your Eamil"));
      } else {
        if (!/^[1-9][0-9]{4,9}$/.test(value)) {
          callback(new Error("Please enter the correct format of qq number"));
        } else {
          callback();
        }
      }
    };
    return {
      sendCodeStatus: true,
      sendCodeText: "验证码",
      totalTime: 60,
      Emailcode: "",
      sendCodeStatus: true,
      SignForm: {
        username: "",
        code: "",
        password: "",
        confirmpassword: "",
      },
      resetRules: {
        username: [{ validator: validateEamil, trigger: "blur" }],
        code: [
          { required: true, message: "please fill your code", trigger: "blur" },
          { max: 6, message: "max number 6", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "please fill your New_password",
            trigger: "blur",
          },
        ],
        confirmpassword: [
          {
            required: true,
            message: "please fill your New_password",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  computed: {},
  methods: {
    /** 邮箱验证码请求 */
    async handleEmailcode() {
      if (this.SignForm.username) {
        if (/^[1-9][0-9]{4,9}$/.test(this.SignForm.username)) {
        const  { data : result} = await CheckUsers({email:this.SignForm.username+"@qq.com"})
        console.warn("result", result)
        if(result.code !== 200){
          const { data: res } = await Sendemails({
            email: this.SignForm.username + "@qq.com",
          });
          this.Emailcode = res.code;
          this.$Message.success("验证码发送成功! 请注意查收");
          this.sendCodeStatus = false;
          this.sendCodeText = `${this.totalTime}s`;
          this.clockTime = window.setInterval(() => {
            this.totalTime -= 1;
            this.sendCodeText = `${this.totalTime}s`;
            if (this.totalTime < 0) {
              window.clearInterval(this.clockTime);
              this.sendCodeText = "Send code";
              this.totalTime = 60;
              this.sendCodeStatus = true;
            }
          }, 1000);
        }else{
          this.$Message.error("邮箱已被注册!请返回重新登录");
        }
        } else {
          this.$Message.error("请输入正确的邮箱格式！");
        }
      } else {
        this.$Message.error("请输入邮箱！");
      }
    },
    /** 注册请求 */
     handleSignup(name) {
      console.log("hello")
      this.$refs[name].validate(async(valid)=>{
        if(valid){
          const { password,confirmpassword} = this.SignForm
          if( password == confirmpassword ){
             console.warn(this.Emailcode,this.SignForm.code)
            if(this.code == this.SignForm.emailcode){
              const {data:res } = await SignupAPI({username:this.SignForm.username + "@qq.com",password:password});
              if(res.code == 200 ){
                 this.$Message.success("注册成功!")
                 this.$emit('Backlogin',this.SignForm.username);
              }
            }else{
              this.$Message.error("验证码错误,请检查邮箱验证码是否正确！")
            }
          }else{
            this.$Message.error("两次密码不一样请检查后重新再试！")
          }
        }
      })
     
    },
    /** 自定义事件 */
    handleReset(){
      this.$refs.formDynamic.resetFields();
    }
  },
};
</script>
<style scoped>
.sub_btn {
  width: 300px;
  margin-left: 80px;
}
.resetpass .ivu-btn {
  width: 90px;
  margin-left: 20px !important;
}
.code_email {
  width: 250px !important;
}
</style>
